<template>
  <div class="airesult-head">
    <i class="iconfont icon-fanhui" @click="back"></i>
    <span>行程规划结果</span>
    <i class="iconfont icon-fenxiang"></i>
  </div>
  <div class="box"></div>
  <div class="airesult-content" v-if="travelDetailList">
    <div class="travel-date-place">
      <div class="sum-days">
        <span>总天数</span>
        <span>4天</span>
      </div>
      <div class="travel-place">
        <span>目的地</span>
        <span>{{ travelDetailList.destination }}</span>
      </div>
      <div class="travel-date">
        <span>出行日期</span>
        <span>7.20-7.23</span>
      </div>
    </div>
    <div class="travel-content">
      <div class="item" v-for="(item, index) in travelDetailList.travelDetail" :key="index">
        <div class="item-head">
          <span class="left">{{ formateDate(item.dayDate)[1] }}月{{ formateDate(item.dayDate)[2] }}日</span>
          <span class="middle">周{{ formateWeek(item.dayDate) }}</span>
          <span class="right">Day {{ index + 1 }}</span>
        </div>
        <div class="item-content" v-for="(item, index) in item.dayTrip" :key="index">
          <div class="item-content-head">
            <span class="scenic_name">{{ item.scenicName }}</span>
            <span class="now_time">{{ item.startTime }} - {{ item.endTime }}</span>
          </div>
          <div class="item-content-playtime">
            <span>游览时间：约{{ item.travelTime }}</span>
          </div>
          <div class="item-content-detail">
            <span>{{ item.introduction }}</span>
          </div>
          <div class="item-content-time">
            <div class="type-name">
              <i class="iconfont icon-buxing"></i>
              <span>{{ item.travalMode }} {{ item.workTime }}</span>
            </div>
            <div class="like_guide">
              <div class="edit" @click="">
                <i class="iconfont icon-bianji"></i>
              </div>
              <div class="del" @click="deleteItem">
                <i class="iconfont icon-shanchu"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="airesult-content-foot">
      <van-button @click="logi" type="primary" size="large" class="left">重新规划</van-button>
    <van-button @click="toPlan" type="primary" size="large" class="right">添加行程</van-button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useAiResultStore } from '../store/airesult.js';
import { onMounted, ref } from 'vue';
import { formateDate, formateWeek } from '../utils/formatedate.js';

// 调用ai结果仓库
const aiResultStore = useAiResultStore()
// 渲染页面数据
const travelDetailList = ref()

onMounted(() => {
  // 用正则去除```json和```，并且将JSON数据转为对象
  travelDetailList.value = JSON.parse(aiResultStore.getAiPlanResult().replace(/```json|```/g, ''))
  console.log(travelDetailList.value);
  
})
const router = useRouter()
// 顶部返回按钮，点击返回上一页面
const back = () => {
  router.back()
}

// 将ai生成结果添加到我的行程并且跳转到行程页面
const toPlan = () => {
  // aiResultStore.addTravel(travelDetailList.value)
  // console.log(aiResultStore.getMyTravel());
  router.push('/plan')
}

//获取仓库中生成的ai结果
const logi = () => {
  
  console.log(aiResultStore.getMyTravel()); 
  
}


</script>

<style lang="less" scoped>
.airesult-head{
  box-sizing: border-box;
  padding: 0 0.43rem;
  z-index: 999;
  position: fixed;
  top: 0;
  height: 1.5rem;
  width: 100%;
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.05);
  align-items: center;
  justify-content: space-between;
  display: flex;
  span{
    font-weight: 600;
    font-size: 0.48rem;
    color: #000000;
    line-height: 28px;
  }
  i{
    font-weight: 900;
  }
}
.box{
  height: 1.5rem;
}
.airesult-content{
  padding: 0.43rem;
  height: calc(100vh - 3.6rem);
  overflow-y: scroll;
  .travel-date-place{
    border-radius: 16px;
    padding: 0.43rem;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
    display: flex;
    .sum-days{
      padding: 0 0.67rem;
      span:first-child{
        display: inline-block;
        font-weight: 400;
        font-size: 0.37rem;
        color: #6B7280;
        line-height: 20px;
      }
      span:nth-child(2){
        margin-top: 3px;
        font-weight: 500;
        font-size: 0.53rem;
        color: #3176FF;
        line-height: 28px;
      }
    }
    .travel-place{
      padding: 0 0.67rem;
      border-right: 1px solid #F3F4F6;
      border-left: 1px solid #F3F4F6;
      span:first-child{
        display: inline-block;
        font-weight: 400;
        font-size: 0.37rem;
        color: #6B7280;
        line-height: 20px;
      }
      span:nth-child(2){
        margin-top: 3px;
        font-weight: 500;
        font-size: 0.4rem;
        color: #000000;
        line-height: 28px;
      }
    }
    .travel-date{
      padding: 0 0.67rem;
      span:first-child{
        display: inline-block;
        font-weight: 400;
        font-size: 0.37rem;
        color: #6B7280;
        line-height: 20px;
      }
      span:nth-child(2){
        margin-top: 3px;
        font-weight: 500;
        font-size: 0.37rem;
        color: #000000;
        line-height: 20px;
      }
    }
  }
  .travel-content{
    .item{
      margin-top: 0.43rem;
      padding: 0.43rem;
      box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
      border-radius: 16px;
      &-head{
        display: flex;
        align-items: center;
        .left{
          font-weight: 600;
          font-size: 0.48rem;
          color: #000000;
          line-height: 28px;
        }
        .middle{
          margin-left: 0.29rem;
          font-weight: 400;
          font-size: 0.37rem;
          color: #9CA3AF;
          line-height: 20px;
        }
        .right{
          margin-left: auto;
          font-weight: 400;
          font-size: 0.37rem;
          color: #3176FF;
          line-height: 20px;
        }
      }
      &-content{
        padding: 0.43rem;
        box-sizing: border-box;
        margin-top: 0.43rem;
        box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -2px rgba(0,0,0,0.1);
        border-radius: 0.43rem;
        &-head{
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;
          .scenic_name{
            font-weight: 600;
            font-size: 0.48rem;
            color: #000000;
            line-height: 28px;
          }
          .now_time{
            display: inline-block;
            background-color: #cfe2fc;
            padding: 4px 8px;
            border-radius: 100px;
            color: #3176FF;
            font-weight: 400;
            font-size: 0.37rem;
          }
        }
        &-playtime{
          margin-top: 4px;
          font-weight: 400;
          font-size: 0.37rem;
          color: #6B7280;
          line-height: 0.53rem;
        }
        &-detail{
          margin-top: 8px;
          font-weight: 400;
          font-size: 0.37rem;
          color: #4B5563;
          line-height: 0.53rem;
        }
        &-time{
          margin-top: 0.32rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .type_time{
            font-weight: 400;
            font-size: 0.37rem;
            color: #6B7280;
            line-height: 20px;
          }
          .like_guide{
            display: flex;
            div{
              padding: 0.27rem;
              font-size: 0.37rem;
              border-radius: 8px;
            }
            .edit{
              color: green;
            }
            .del{
              color: red;
            }
          }
        }
      }
    }
  }
  &-foot{
    margin-top: 0.43rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    display: flex;
    .left{
      background-color: #fff;
      color: #4B5563;
      border: 1px solid #E5E7EB;
      margin-right: 0.43rem;
    }
  }
}

</style>